<template>
  <el-container>
    <el-main>
      <div class="headtitle">
        正在搜索关键词
        <a>{{keyword}}</a>
      </div>
      <el-tabs v-model="activeName" lazy="true">
        <!-- //这里name期望是个字符串，所以我们拼接 -->
        <el-tab-pane
          :label="item"
          :name="index + ''"
          v-for="(item,index) in tabs_data"
          :key="index"
        >
          <!-- 主体区域 -->
          <Item
            v-if="index + '' === activeName"
            :types="index"
            :userdataArr="userdataArr"
            :wallsdataArr="wallsdataArr"
          ></Item>
          <div v-else>正在根据关键字匹配结果</div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-aside width="200px">
      <div class="title">
        <h2>热门搜索</h2>
      </div>
      <!-- 排行榜 -->
      <div class="list" v-if="hintlistdata.length > 0">
        <ul>
          <li
            v-for="(item,index) in hintlistdata"
            :key="item.id"
            @click="handleclicksearch(item.keyword)"
          >
            <i
              :class="[index < 3?'iconfont icon-huoyuebang':'behind',index === 0?'list1':index === 1?'list2':index === 2?'list3':'']"
            >{{index + 1}}.</i>
            <a
              :title="item.keyword"
              :class="[index === 0?'list1':index === 1?'list2':index === 2?'list3':'']"
            >&nbsp;{{item.keyword}}</a>
          </li>
        </ul>
      </div>
      <div v-else>正在加载热门搜索</div>
    </el-aside>
  </el-container>
</template>

<script>
// 引入子组件
import Item from "./item/index.vue";
export default {
  data() {
    return {
      tabs_data: ["综合", "用户", "文章"],
      activeName: "0", //tag控制
      hintlistdata: [], //热门搜索数组
      userdataArr: [], //用户信息数组
      wallsdataArr: [], //文章信息数组
      keyword: "",
    };
  },
  mounted() {
    // 监听父组件全局总线函数
    this.$bus.$on("getdataBykeyword", (keyword) => {
      this.getSearchContent(keyword);
    });
    // 获取搜索内容
    this.getSearchContent(this.$route.params.keyword);
    // 页面加载完成再去获取
    this.$nextTick(() => {
      // 获取热门搜索数据
      this.gethintlist();
    });
  },
  methods: {
    // 获取热门搜索数据的回调
    async gethintlist() {
      let result = await this.$API.gethintlist();
      if (result.code === 200) {
        this.hintlistdata = result.data; //赋值
      }
    },
    // 获取搜索内容回调
    async getSearchContent(keyword) {
      this.keyword = keyword; //赋值
      // 判断
      if (!keyword) return this.$message("关键词不能为空");
      // 发送请求
      let result = await this.$API.getsearchBykeyword(keyword);
      // 判断
      if (result.code === 200) {
        // 判断是否查询到文章
        if (result.data.walls.length !== 0) {
          // 循环遍历查询每篇文章是否有照片墙
          result.data.walls.forEach((item) => {
            if (item.pic_walls) {
              item.pic_walls = item.pic_walls.split("___");
            }
          });
        }
        this.userdataArr = result.data.user;
        this.wallsdataArr = result.data.walls;
      }
    },
    // 侧边栏点击搜索关键词回调
    handleclicksearch(keyword) {
      this.getSearchContent(keyword);
    },
  },
  components: {
    Item,
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs__item.is-active {
  color: #008c8c;
}
/deep/.el-tabs__item:hover {
  color: #008c8c;
}
/deep/.el-tabs__active-bar {
  background: #008c8c;
}
.el-container {
  width: 1000px;
  min-height: 500px;
  padding: 0 16px;
  margin: 10px auto;
  .headtitle {
    color: #121212;
    a {
      color: #008c8c;
      font-size: 18px;
      font-weight: 700;
    }
  }
  .el-main {
    border-radius: 5px;
    width: 690px;
    margin-right: 10px;
    background: #fff;
  }
  .el-aside {
    background: #fff;
    border-radius: 5px;
    width: 200px;
    height: 400px;
    .title {
      height: 30px;
      line-height: 30px;
      padding: 10px 10px 0 10px;
      text-align: center;
      h2 {
        font-size: 20px;
        font-weight: 700;
        color: #008c8c;
      }
    }
    .list {
      height: auto;
      padding: 0 5px;
      ul {
        li {
          height: 30px;
          line-height: 30px;
          // 溢出隐藏省略号代替
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          .iconfont {
            font-size: 20px;
          }
          a {
            font-size: 16px;
          }
          .behind {
            display: inline-block;
            width: 36px;
            height: 20px;
            line-height: 20px;
            border-radius: 5px;
            background: #008c8c;
            opacity: 0.7;
            color: #fff;
            text-align: center;
          }
        }
        li:hover {
          cursor: pointer;
          font-weight: 700;
        }
      }
    }
    .list1 {
      color: #f1403c;
    }
    .list2 {
      color: #eb7350;
    }
    .list3 {
      color: #ff8747;
    }
  }
}
</style>